<script setup lang="ts">
import { ref, watch, reactive } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import RichTextEditor from '@/components/common/RichTextEditor.vue'

// 定义数据类型接口
interface EditPanelData {
  question: string
  questionSimilar: string[]
  answer: string
  category: string
  updateDate: string
  hitCount: number
  validPeriod: string
  validTimeDateRange: []
}

// 定义 props 类型
interface Props {
  data: EditPanelData
}

// 定义 props
const props = withDefaults(defineProps<Props>(), {})

// 创建本地响应式数据副本
const localData = ref<EditPanelData>({
  question: '',
  questionSimilar: [],
  answer: '',
  category: '',
  updateDate: '',
  hitCount: 0,
  validPeriod: '',
  validTimeDateRange: [],
})

// 初始化本地数据
const initLocalData = () => {
  localData.value = reactive<EditPanelData>({
    question: props.data.question || '',
    questionSimilar: props.data.questionSimilar ? [...props.data.questionSimilar] : [],
    answer: props.data.answer || '',
    category: props.data.category || '全部分类',
    updateDate: props.data.updateDate || '',
    hitCount: props.data.hitCount || 0,
    validPeriod: props.data.validPeriod || '永久有效',
    validTimeDateRange: props.data.validTimeDateRange || [],
  })
}

// 监听 props.data 的变化
watch(
  () => props.data,
  () => {
    initLocalData()
  },
  { deep: true },
)

// 初始化
initLocalData()

const categoryList = [
  {
    value: '全部',
    label: '全部',
  },
  {
    value: '其他',
    label: '其他',
  },
]
</script>

<template>
  <div>
    <!-- 第1行 -->
    <el-row class="label-wrap">
      <el-col :span="10"><span class="label">分类</span></el-col>
      <el-col :span="14"><span class="label">有效时间</span></el-col>
    </el-row>
    <el-row class="form-wrap">
      <el-col :span="10">
        <el-select v-model="localData.category" placeholder="请选择" style="width: 240px">
          <el-option
            v-for="item in categoryList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="7">
        <el-radio-group v-model="localData.validPeriod">
          <el-radio value="永久有效">永久有效</el-radio>
          <el-radio value="指定日期">指定日期</el-radio>
        </el-radio-group>
      </el-col>
      <el-col :span="7">
        <el-date-picker
          v-model="localData.validTimeDateRange"
          type="daterange"
          range-separator="To"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 100%"
        />
      </el-col>
    </el-row>

    <!-- 第2行 -->
    <el-row class="label-wrap">
      <el-col :span="24"><span class="label">问题</span></el-col>
    </el-row>
    <el-row class="form-wrap" :gutter="10">
      <el-col :span="16">
        <el-input v-model="localData.question" />
      </el-col>
      <el-col :span="4">
        <el-button type="primary" plain>查找相似问题</el-button>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" plain>增加一种问法</el-button>
      </el-col>
    </el-row>

    <!-- 第3行 -->
    <el-row class="label-wrap">
      <el-col :span="24">其余问法</el-col>
    </el-row>
    <template v-for="(item, index) in localData.questionSimilar" :key="index">
      <el-row class="form-wrap" :gutter="10" align="middle">
        <el-col :span="16">
          <el-input v-model="localData.questionSimilar[index]" />
        </el-col>
        <el-col :span="4"><el-button type="danger" :icon="Delete" plain /></el-col>
      </el-row>
    </template>

    <!-- 第4行 -->
    <el-row class="label-wrap">
      <el-col :span="24"><span class="label">答案</span></el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <rich-text-editor height="200px" />
      </el-col>
    </el-row>
  </div>
</template>
<style scoped>
.label-wrap {
  margin-bottom: 5px;
}

.form-wrap {
  margin-bottom: 15px;
}
</style>
